new Vue({
    el: '#app',
    data: {
        //任务列表
        tasks: [],
        //任务类型
        tasksTypes: [{
            id: 1,
            type: '全部任务'
        }, {
            id: 2,
            type: '已完成'
        }, {
            id: 3,
            type: '待办'
        }],
        showRemoveTask: false, //展示确定删除任务的模态框
        showAddTask: false, //展示添加任务的模态框
        newTaskText: '', //新建任务内容
        removeTaskIndex: -1, //即将删除任务的索引
        checkedIndex: 0 //被选中的任务类型的索引
    },
    created() {
        this.getCookie('tasks');
    },
    methods: {
        // 添加任务
        addTask() {
            if (this.newTaskText != '') {
                $.toast("添加成功", 500);
                this.tasks.push({
                    id: this.tasks.length + 1,
                    text: this.newTaskText,
                    done: false
                });
                this.newTaskText = '';
            }
        },
        // 尝试直接删除任务
        tryRemoveTask(id) {
            if (this.tasks[id - 1].done) { //如若任务完成直接删除
                $.toast("删除成功", 500);
                this.tasks.splice(id - 1, 1);
                this.idSort();
            } else { //否则弹窗确认删除模态框并将即将删除任务的索引设置成index
                this.removeTaskIndex = id - 1;
                this.showRemoveTask = !this.showRemoveTask;
            }
        },
        // 确定删除任务
        removeTask() {
            $.toast("删除成功", 500);
            this.tasks.splice(this.removeTaskIndex, 1);
            this.idSort();
        },
        //当删除任务时对id进行重新排序
        idSort() {
            for (let i = 0; i < this.tasks.length; i++) {
                this.tasks[i].id = i + 1;
            }
        },
        //切换任务类型
        switchTaskType(index) {
            this.checkedIndex = index;
        },
        setCookie(name, value, day) {
            var oDate = new Date();
            oDate.setDate(oDate.getDate() + day);
            if (typeof value == "object") {
                value = JSON.stringify(value);
            }
            document.cookie = name + '=' + value + ';expires=' + oDate;
            $.toast("数据保存cookie成功，有效期30天", 2000);
        },
        getCookie(name) {
            var arr = document.cookie.split('; ');
            for (var i = 0; i < arr.length; i++) {
                var arrName = arr[i].split('=');
                if (arrName[0] == name) {
                    this.tasks = JSON.parse(arrName[1]);
                    return;
                }
            }
            return;
        }
    },
    computed: {
        checkedTypeTasks() {
            switch (this.checkedIndex) {
                case 0: //返回所有任务
                    return this.tasks;
                    break;
                case 1: //返回已完成任务
                    return this.tasks.filter(val => val.done);
                    break;
                case 2: //返回未完成任务
                    return this.tasks.filter(val => !val.done);
                    break;
            }
        }
    },
})